import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import {
  Grid,
  Typography,
  colors,
  Avatar,
  NoSsr,
} from '@material-ui/core';
import { Image, LearnMoreLink } from 'components/atoms';
import { CardProduct } from 'components/organisms';
import logo from 'assets/images/logo.png';


const useStyles = makeStyles(theme => ({
  cardProduct: {
    borderRadius: theme.spacing(3),
  },
  courseCardPrice: {
    padding: theme.spacing(1),
    position: 'absolute',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
    background: theme.palette.background.paper,
    borderRadius: theme.spacing(1),
  },
  courseCardReviewAvatar: {
    marginLeft: theme.spacing(-2),
    border: `3px solid ${theme.palette.background.paper}`,
    '&:first-child': {
      marginLeft: 0,
    },
  },
  courseCardReviewStar: {
    color: colors.yellow[800],
    marginRight: theme.spacing(1 / 2),
  },
  reviewCount: {
    marginLeft: theme.spacing(1),
  },
  image: {
    objectFit: 'cover',
  },
  fontWeight700: {
    fontWeight: 700,
  },
}));


const BlogItem = props => {
  const { data, className, onClick, ...rest } = props;
  const classes = useStyles();

  const getCommentedUsers = () => {
    var users = [];
    const comments = data.comments;
    for (let i=0; i<comments.length; i++) {
      let comment = comments[i];
      if (!checkExistUser(users, comment.user.id)) {
        users.push(comment.user);
      }
    }
    return users;
  }

  const checkExistUser = (users, userID) => {
    for (let i=0; i<users.length; i++) {
      let user = users[i];
      if (user.id == userID) {
        return true;
      }
    }
    return false;
  }

  return (
      <CardProduct
        className={classes.cardProduct}
        withShadow
        liftUp
        onClick={ onClick }
        mediaContent={
          <>
            <Image
              {...{ src: data.thumbnail }}
              alt={data.title}
              lazyProps={{ width: '100%', height: '100%' }}
              placeHolder={logo}
              className={classes.image}
            />
          </>
        }
        cardContent={
          <Grid container spacing={1}>
            <Grid xs={12} item={true}>
              <Typography
                variant="h6"
                color="textPrimary"
                align="left"
                className={classes.fontWeight700}
              >
                {data.title}
              </Typography>
            </Grid>
            <Grid xs={12} item={true}>
              <Typography
                variant="body1"
                color="textSecondary"
                align="left"
              >
                {data.sub_title}
              </Typography>
            </Grid>
            <Grid container justifyContent="space-between" xs={12} item={true}>
              <Grid container xs={6} wrap="nowrap" item={true}>
                {getCommentedUsers().map((user, index) => (
                  <Avatar
                    key={index}
                    className={classes.courseCardReviewAvatar}
                    alt={user.username}
                    {...{ src: user.photo }}
                  />
                ))}
              </Grid>
              <Grid
                container
                alignItems="center"
                justifyContent="flex-end"
                xs={6}
                item={true}
              >
                {/* <NoSsr>
                      <i
                          className={clsx(
                              'fas fa-star',
                              classes.courseCardReviewStar,
                          )}
                      />
                  </NoSsr>
                  <Typography
                      component="span"
                      variant="body1"
                      className={classes.fontWeight700}
                  >
                      {item.score}
                  </Typography> */}
                <Typography
                  noWrap
                  component="span"
                  variant="body2"
                  color="textSecondary"
                  className={classes.reviewCount}
                >
                  ({data.comments.length} Comments)
                </Typography>
              </Grid>
            </Grid>
            <Grid xs={12} item={true}>
              <LearnMoreLink
                title="Learn more"
                variant="body1"
                color="primary"
              />
            </Grid>
          </Grid>
        }
      />
  )

}

BlogItem.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.object.isRequired,
  onClick: PropTypes.func,
};

export default BlogItem;